import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'
import ElementUI from 'element-ui';
import "@/assets/css/reset.scss"
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.directive("permission", {
  //1.钩子函数都是三个参数，两个update多了oldVnode参数，
  bind(el, binding, vnode) {
    // console.log("bind - 元素未插入 DOM",el,binding,vnode);
  },
  inserted(el, binding,vnode) {
    // console.log("inserted",el,binding,vnode);    
    // console.log("inserted-vnode.context",vnode.context,vnode.data);    
    const { value,expression,oldValue,arg,modifiers,name,def,mode } = binding;
    // console.log('这是binding的值',value,expression,oldValue,arg,modifiers,name,def,mode);
    // value和expression区别：一个是实际值，一个是表达式（写的什么就是什么，比如变量名）
    // 基本值：v-permission="'admin,edit'"
    // 带参数：v-permission:action="'edit'"----binding.arg
    // 带修饰符：v-permission.silent="'admin,edit'"----binding.modifiers
    // 带参数和修饰符：v-permission:action.silent="'admin,edit'"----binding.arg,binding.modifiers
    // 带表达式：v-permission="['admin','edit']"----binding.value
    // 动态值：v-permission="dynamicValue"----value:'hello world',expression:dynamicValue
    // el.parentNode && el.parentNode.removeChild(el);
    // 用途：需要根据用户权限动态控制 UI 元素的显示或交互行为
    // .slient静默模式：适合隐藏敏感操作（如管理员功能）
    // 使用方法
    // const { value, arg, modifiers } = binding;
    // const permissions = vnode.context.$store.state.permissions; // 从 Vuex 获取权限
    // if (!permissions[arg]?.includes(value)) {
    //   if (modifiers.silent) {
    //     el.parentNode?.removeChild(el);
    //   } else {
    //     el.disabled = true;
    //     el.classList.add("disabled-button");
    //     el.setAttribute("title", "无权限");
    //   }
    // }
  },
  // 可以通过比较oldVnode和vnode来判断是否有更新，
  update(el, binding, vnode, oldVnode) {
    // console.log("值变化:", binding.value, binding.oldValue);
  },
  unbind(el, binding, vnode) {
    // console.log("值变化:", el, binding, vnode);
  }
});
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
// vue3用法：
// const app = Vue.createApp({});
// app.directive("permission", {
//   mounted(){}
// })
//改动1：钩子函数，命名变化
// bind → beforeMount
// inserted → mounted
// update → updated（移除）
// componentUpdated → updated
// unbind → unmounted
// 改动2：更灵活的注册方式：
// 全局指令：app.directive
// 局部指令：组件选项中的 directives







































//视频:把webpack的看完，jz看两个视频
//1.代码层面：vue路由，axios,http状态码，
//2.理解层面：vue生命周期，编译，组件化，双向绑定，响应式，虚拟dom,diff算法，单向数据流，单向数据流和双向数据流的区别
//3.理解npm包管理，webpack打包原理，提升打包速度的方法
//4.理解es6，promise，async/await,闭包，原型链，this指向，函数节流和防抖，深拷贝和浅拷贝，跨域，http和https的区别，http1.1和http2的区别，浏览器缓存，浏览器渲染原理，重绘和回流
//5.理解前端工程化，模块化，自动化，组件化，微前端，前端性能优化，前端安全，前端测试，前端监控
//6.理解前端框架vue，react，angular的区别，vue和react的区别，vue3和vue2的区别，vue3的composition api
//7.理解css预处理器sass,less,stylus的区别，css in js,css模块化，css命名规范BEM
//8.理解移动端适配方案rem,vw,vh,百分比布局，媒体查询，flexbox,grid
//9.理解前端常用设计模式单例模式，观察者模式，发布订阅模式，工厂模式，装饰器模式，策略模式
//10.理解前端常用算法和数据结构排序算法，查找算法，链表，栈，队列，树，图，哈希表
//11.理解前端常用工具git,svn,webpack,rollup,parcel,babel,eslint,prettier
//12.理解前端常用库jquery,lodash,underscore,moment,axios,redux,mobx
//13.理解前端常用api dom api,fetch api,canvas api,websocket api,service worker api
//14.理解前端常用框架vue,react,angular,ant design,element ui,bootstrap,vant,ionic,flutter
//15.理解前端常用技术栈nodejs,express,koa,eggjs,mysql,redis,mongodb,nginx,pm2,pm2 cluster,pm2 cluster fork,pm2 cluster cluster,pm2 cluster cluster fork
//16.理解前端常用工具webpack,rollup,parcel,babel,eslint,prettier
//17.理解前端常用库jquery,lodash,underscore,moment,axios,redux,mobx
//18.理解前端常用api dom api,fetch api,canvas api,websocket api,service worker api
//19.理解前端常用框架vue,react,angular,ant design,element ui,bootstrap,vant,ionic,flutter
//20.理解前端常用技术栈nodejs,express,koa,eggjs,mysql,redis,mongodb,nginx,pm2,pm2 cluster,pm2 cluster fork,pm2 cluster cluster,pm2 cluster cluster fork
//21.理解前端常用工具webpack,rollup,parcel,babel,eslint,prettier
//22.理解前端常用库jquery,lodash,underscore,moment,axios,redux,mobx
//23.理解前端常用api dom api,fetch api,canvas api,websocket api,service worker api
//24.理解前端常用框架vue,react,angular,ant design,element ui,bootstrap,vant,ionic,flutter
//25.理解前端常用技术栈nodejs,express,koa,eggjs,mysql,redis,mongodb,nginx,pm2,pm2 cluster,pm2 cluster fork,pm2 cluster cluster,pm2 cluster cluster fork
